<template>
    <div class="light-Ct">
        <div class="item-Cd item-Cd-Dom1">
            <div @click="seeNodeDetail(index, item)" class="light-circle" style="position: relative;" :class="{
                'light-green': item.nodeState == 1,
                'light-red': item.nodeState == 0,
                'light-orange': item.nodeState == 2,
            }">
                <span class="circleTit"> {{ item.percent }} </span>
            </div>

            <div class="item-name">
                <div v-if="!isEditing" @click="startEdit(1)" class="pointers">{{ item.nodeName }}</div>
                <el-input v-else v-model="editedName" @blur="finishEdit" @keyup.enter="finishEdit" ref="editInput1"
                    style="width: 120px;" />
            </div>

            <div class="operation">
                <a @click="addBrotherItem(index, item)" v-if="item.projectId !== 0" title="同级 +"><el-icon>
                        <ArrowRightBold />
                    </el-icon></a>
                <span v-if="item.projectId !== 0">|</span>
                <a @click="addChildItem(index, item)" title="子级 + "><el-icon>
                        <ArrowDownBold />
                    </el-icon></a>
                <span>|</span>
                <a @click="testIntem(index, item)" title="编辑">
                    <el-icon>
                        <EditPen />
                    </el-icon>
                </a>
                <span>|</span>
                <a @click="deleteItem(index, item)" title="删除"><el-icon>
                        <DeleteFilled />
                    </el-icon></a>
                <span v-if="item.children && item.children.length">|</span>
                <a v-if="item.children && item.children.length" @click="expandCollapse(index, item)" title="收起/展开">
                    <el-icon v-if="item.expanded">
                        <CaretTop />
                    </el-icon>
                    <el-icon v-else>
                        <CaretBottom />
                    </el-icon>
                </a>
            </div>

            <el-popover placement="bottom" :width="240" trigger="hover">
                <template #reference>
                    <div class="item-btn">
                        <a title="更多"><el-icon>
                                <MoreFilled />
                            </el-icon></a>
                    </div>
                </template>
                <div class="item-info">
                    <p>开始时间: {{ formatDateTime(item.nodeStartTime) }}</p>
                    <p>结束时间: {{ formatDateTime(item.nodeEndTime) }}</p>
                </div>
            </el-popover>
        </div>

        <!-- 添加箭头元素 -->
        <div v-if="item.expanded && item.children && item.children.length" class="arrow"></div>

        <div v-if="item.expanded && item.children && item.children.length"
            :class="item.children && item.children.length ? 'childItem childItemSon' : 'childItem'">
            <RecursiveItem v-for="(child, childIndex) in item.children" :key="childIndex" :item="child"
                :index="childIndex" @editItem="editItem" @addBrotherItem="addBrotherItem" @addChildItem="addChildItem"
                @deleteItem="deleteItem" @testIntem="testIntem" @seeNodeDetail="seeNodeDetail"
                @expandCollapse="expandCollapse" />
        </div>
    </div>
</template>

<script setup>
import { ref, onMounted, defineProps, defineEmits, onUnmounted, nextTick } from 'vue';
import RecursiveItem from './RecursiveItem.vue';
import { formatDateTime } from "@/utils/format";
// import { ElMessage } from 'element-plus';
import { ArrowRightBold, ArrowDownBold, DeleteFilled, EditPen, CaretTop, CaretBottom, MoreFilled } from '@element-plus/icons-vue';

const props = defineProps({
    item: {
        type: Object,
        required: true
    },
    index: {
        type: Number,
        required: true
    },
});

const emit = defineEmits(['testIntem', 'editItem', 'addBrotherItem', 'addChildItem', 'deleteItem', 'seeNodeDetail', 'expandCollapse']);

const isEditing = ref(false);
const editedName = ref(props.item.nodeName);
const editInput1 = ref(null);
const editInput2 = ref(null);
const startEdit = (type) => {
    isEditing.value = true;
    nextTick(() => {
        if (isEditing.value) {
            if (type == 1 && editInput1.value) {
                editInput1.value.focus();
            }
            if (type == 2 && editInput2.value) {
                editInput2.value.focus();
            }
        }
    });
};

const finishEdit = () => {
    isEditing.value = false;
    if (!editedName.value) {
        // editedName.value = props.item.nodeName;
        return //ElMessage.error("请输入节点名称");
    }
    if (editedName.value !== props.item.nodeName) {
        emit('editItem', props.index, { ...props.item, nodeName: editedName.value });
    }
};

const testIntem = (index, item) => {
    emit('testIntem', index, item);
};

const editItem = (index, item) => {
    emit('editItem', index, item);
};

const addBrotherItem = (index, item) => {
    emit('addBrotherItem', index, item);
};

const addChildItem = (index, item) => {
    emit('addChildItem', index, item);
};

const deleteItem = (index, item) => {
    emit('deleteItem', index, item);
};

const seeNodeDetail = (index, item) => {
    emit('seeNodeDetail', index, item)
};

const expandCollapse = (index, item) => {
    emit('expandCollapse', index, item);
};

onMounted(() => {

});

onUnmounted(() => {

});

</script>
<style lang="scss" scoped>
/* src/assets/styles.css */
:root {
  --font-family: Arial, sans-serif;
  --primary-color: #007bff;
  --secondary-color: #6c757d;
  --success-color: #28a745;
  --danger-color: #dc3545;
  --warning-color: #ffc107;
}

body {
  font-family: var(--font-family);
}

.light-green {
  background-color: var(--success-color);
}

.light-red {
  background-color: var(--danger-color);
}

.light-orange {
  background-color: var(--warning-color);
}

.arrow {
  position: absolute;
  left: 50%;
  top: 100%;
  transform: translateX(-50%);
  width: 0;
  height: 0;
  border-left: 10px solid transparent;
  border-right: 10px solid transparent;
  border-top: 10px solid var(--primary-color);
  margin-top: 10px;
}
.pointers {
  cursor: pointer;
}

// 横向样式
.light-Ct {
  position: relative; // 添加相对定位

  .item-Cd {
    padding: 10px;
    box-sizing: border-box;
    position: relative;
    min-width: 98px;
    font-size: 14px;

    &.item-Cd-Dom2 {
      display: none;
    }

    .light-circle {
      width: 15px;
      height: 15px;
      border-radius: 50%;
      background-color: gray;
      cursor: pointer;
      line-height: 30px;
      margin: auto;
      color: black;

      &.light-green {
        background-color: var(--success-color);
      }

      &.light-red {
        background-color: var(--danger-color);
      }

      &.light-orange {
        background-color: var(--warning-color);
      }

      &.light-gray {
        background-color: gray;
      }

      .circleTit {
        position: absolute;
        top: -7px;
        left: 20px;
        font-weight: bold;
      }
    }

    .item-info {
      font-size: 12px;
      width: 178px;
      margin: 20px auto 0px;
      text-align: left;
      line-height: 20px;

      p {
        margin: 0px;
      }
    }

    .item-btn {
      margin-top: 10px;

      a {
        color: var(--el-color-primary);
        cursor: pointer;
      }

      span {
        color: #eee;
        margin: 0px 4px;
      }
    }

    .item-name {
      margin: 10px 0px;
    }

    .operation {
      a {
        color: var(--el-color-primary);
        cursor: pointer;
      }

      span {
        color: #eee;
        // margin: 0px 4px;
      }
    }

  }

  .arrow {
    position: absolute;
    left: 50%;
    top: 100%;
    transform: translateX(-50%);
    width: 0;
    height: 0;
    border-left: 10px solid transparent;
    border-right: 10px solid transparent;
    border-top: 10px solid var(--primary-color);
    margin-top: 10px;
  }

  .childItem {
    display: flex;
    margin-top: 20px; // 添加间距
  }

  .childItemSon>.light-Ct {
    border-right: 1px solid;
  }

  .childItemSon>.light-Ct:last-child {
    border-right: none;
  }
}
</style>
